<style lang="less">
    @import '../../styles/common.less';
</style>

<template>
  <div>
      <Row>
        <Col span="24">
            <Card>
                <Row slot="title">
                    <Col span="12" style="line-height: 32px;font-weight: bold;">个人信息卡列表</Col>
                    <Col span="12" style="text-align: right;">
                        <Button type="primary" icon="android-arrow-back" @click="goBack">返回</Button>                          
                    </Col>
                </Row>
                <Row>
                    <div class="edittable-table-height-con">
                        <Table stripe :loading="isLoading" :columns="columns" :data="companys" border disabled-hover></Table>
                            <div style="margin: 10px;overflow: hidden">
                                <div style="float: right;">
                                    <Page :total="total" :current="currentPage" :page-size="20" @on-change="changePage" show-elevator></Page>
                                </div>
                            </div>
                    </div>
                </Row>
            </Card>
        </Col>
      </Row>
  </div>

</template>

<script>
import dataTable from '../my-components/data-table/editableTable.vue';
export default {
    name: 'company-index',
    components: {
        dataTable
    },
    data () {
        return {
            isLoading: true,
            // 表头
            columns: [
                {
                    title: '姓名',
                    align: 'center',
                    key: 'name'
                },
                {
                    title: '性别',
                    align: 'center',
                    render: (h, params) => {
                        const val = params.row;
                        if (val.sexy === 1) {
                            return h('Tag', {
                                props: {
                                    color: 'green'
                                }
                            }, '男');
                        } else if (val.sexy === 2) {
                            return h('Tag', {
                                props: {
                                    color: 'blue'
                                }
                            }, '女');
                        }
                    }
                },
                {
                    title: '证件类型',
                    align: 'center',
                    key: 'cardType'
                    // render: (h, params) => {
                    //     const val = params.row;

                    //     if (val.cardType === 1) {
                    //         return h('span', {
                    //         }, '身份证');
                    //     } else if (val.cardType === 2) {
                    //         return h('span', {
                    //         }, '护照');
                    //     }
                    // }
                },
                {
                    title: '证件号',
                    align: 'center',
                    key: 'cardNo'
                },
                {
                    title: '手机号',
                    align: 'center',
                    key: 'phone'
                },
                {
                    title: '收货地址',
                    align: 'center',
                    render: (h, params) => {
                        const val = params.row;
                        return h('span', {
                        }, val.province + val.city + val.area + val.address);
                    }
                },
                {
                    title: '服装尺码',
                    align: 'center',
                    key: 'size'
                },
                {
                    title: '紧急联系人',
                    align: 'center',
                    key: 'contact'
                },
                {
                    title: '紧急联系电话',
                    align: 'center',
                    key: 'contactPhone'
                },
                {
                    title: '血型',
                    align: 'center',
                    key: 'bloodType'
                },
                {
                    title: '创建时间',
                    align: 'center',
                    key: 'createTime'
                }
            ],
            // 数据
            companys: [],
            total: 0,
            currentPage: 1,
            search: {}
        };
    },
    methods: {
        goBack () {
            window.history.go(-1);
        },
        getData () {
            this.search.openId = this.$route.params.openId;
            this.isLoading = true;
            this.$get('/memberInfo/list?pageNum=' + this.currentPage, this.search)
                .then(res => {
                    this.companys = res.records;
                    this.total = res.total;
                    this.currentPage = res.current;

                    this.isLoading = false;
                })
                .catch(error => {
                    this.isLoading = false;
                    this.$Message.error(error.msg || error.message);
                });
        },
        changePage (pageNum) {
            this.currentPage = pageNum;
            this.getData();
        }
    },
    created () {
        this.getData();
    }
};
</script>
